<template>
  <div class="home">
    <div class="headers">
      <div class="headers-main">
        <Header></Header>
        <!-- ly-tab区域 -->
        <ly-tabs v-model="value" :activeColor="'red'" @change="changeTab">
          <!-- <ly-tabs v-model="value" :class="name == value?'':''" @change="changeTab"> -->
          <ly-tab-item name="0" title="推荐" />
          <ly-tab-item name="1" title="尤尼克斯" />
          <ly-tab-item name="2" title="李宁" />
          <ly-tab-item name="3" title="胜利" />
        </ly-tabs>
      </div>
    </div>
    <!-- 轮播图 -->
    <section class="wrapper">
      <div>
        <Swiper
          v-if="typeList.includes('swiperList')"
          :swiperList="newData.find((item) => item.type == 'swiperList')"
        ></Swiper>
        <Ad
          v-if="typeList.includes('adList')"
          :adList="newData.find((item) => item.type == 'adList')"
        ></Ad>
        <Icons
          v-if="typeList.includes('iconsList')"
          :iconsList="newData.find((item) => item.type == 'iconsList')"
        >
        </Icons>
        <Recommend
          v-if="typeList.includes('recommendList')"
          :recommendList="newData.find((item) => item.type == 'recommendList')"
        ></Recommend>

        <Like
          v-if="typeList.includes('likeList')"
          :likeList="newData.find((item) => item.type == 'likeList')"
        ></Like>
      </div>
    </section>

    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Ad from "@/components/Home/Ad.vue";
import BetterScroll from "better-scroll";
// 引入ly-tab插件
import { LyTabs, LyTabBar, LyTabItem } from "ly-tab";
// 底部四个页面跳转按钮组件
import Tabbar from "@/components/Tabbar.vue";
// 头部搜索框组件
import Header from "@/components/Home/Header.vue";
// 引入swiper
import Swiper from "@/components/Home/Swiper.vue";
// icons组件
import Icons from "@/components/Home/Icons.vue";
// Recommend组件
import Recommend from "@/components/Home/Recommend.vue";
// 猜你喜欢组件
import Like from "@/components/Home/Like.vue";
// 引入二次封装的axios
import http from "@/common/request.js";
// import axios from "axios";
export default {
  name: "Home",
  data() {
    return {
      value: "0",
      // 页面选择
      topBar: [],
      newData: [],
      typeList: [],
      oBetterScroll: "",
      tBetterScroll: "",
    };
  },
  created() {
    this.getData();

  },
  mounted() {},
  methods: {
    // 请求首页推荐
    async getData() {
      let { data } = await http.$axios({
        url: "/api/index_list/0/data/1",
      });
      this.topBar = data.data.topBar;
      this.newData = data.data;
      console.log(this.newData);
      this.newData.forEach((item) => this.typeList.push(item.type));
      this.$nextTick(() => {
        this.oBetterScroll = new BetterScroll(".wrapper", {
          disableTouch: false,
          movable: true,
          zoom: true,
          click:true
        });
      });
    },

    async addDate(index) {
      let { data } = await http.$axios({
        url: `/api/index_list/${index}/data/1`,
      });

      this.newData = data;
      this.newData.forEach((item) => this.typeList.push(item.type));
      this.tBetterScroll = this.$nextTick(() => {
        new BetterScroll(".wrapper", {
          disableTouch: false,
          movable: true,
          zoom: true,
          click:true
        });
      });
    },
    // 当点击tapBar时会切换数据
    changeTab(item) {
      if (item == 0) {
        this.typeList = [];
        this.newData = [];
        this.getData();
      } else {
        this.typeList = [];
        this.newData = [];
        // this.data = []
        this.addDate(item);
      }
    },
  },

  components: {
    Tabbar,
    Header,
    LyTabs,
    LyTabBar,
    LyTabItem,
    Swiper,
    Icons,
    Recommend,
    Like,
    Ad,
  },
};
</script>

<style scoped>
.home {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.headers {
  width: 100%;
  height: 80px;
}

.headers-main {
  position: fixed;
  left: 0;
  top: 0;
}

section {
  flex: 1;
  overflow: hidden;
}

</style>
